<template>
  <!-- 策略下发 -->
  <div class="issued">
    <a-spin :spinning="loading">
      <div class="filterContent">
        <!--  <a-button
          type="primary"
          class="yellowBtn"
          @click="goBack"
          style="margin-left: 10px; margin-bottom: 20px"
          v-if="props.stationId || isDetial"
        >
          返回</a-button
        > -->
        <a-form :model="filterForm" layout="inline">
          <a-form-item label="电站名称">
            <a-select
              ref="select"
              v-model:value="filterForm.stationId"
              class="formInput"
              placeholder="请选择"
              show-search
              optionFilterProp="label"
              allow-clear
              style="width: 150px"
              @change="changeStation"
              :disabled="props.stationId || isDetial"
            >
              <a-select-option
                v-for="item in props.stationList"
                :key="item.stationId"
                :value="item.stationId"
                :label="item.stationName"
                :title="item.stationName"
              >
                {{ item.stationName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-button
            type="primary"
            class="filterBtn"
            @click="getEnergyLinkList"
            v-if="!isDetial"
            >查询</a-button
          >
          <a-button
            type="primary"
            class="yellowBtn"
            @click="goBack"
            style="margin-left: 10px"
          >
            返回</a-button
          >
        </a-form>
      </div>
      <div>
        <a-tabs
          v-model:activeKey="activeKey"
          @change="changeTab"
          v-if="!isDetial"
        >
          <a-tab-pane
            v-for="item in energyLinkList"
            :key="item.deviceId"
            :tab="item.name"
          />
        </a-tabs>
        <div class="infCon">
          <BaseInf :baseInf="activeObj" />

          <DemandDetial
            :linkDeviceId="activeKey"
            :energyLinkList="energyLinkList"
            v-if="!isDetial"
            ref="demandDetialRef"
          />
          <issuedDetial
            :rowDataId="props.rowDataId"
            :linkDeviceId="activeKey"
            :isDetial="isDetial"
            :stationInfo="stationInfo"
            ref="issuedDetialRef"
          />
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script setup>
// 
import { Spin } from 'ant-design-vue'
import issuedDetial from "./issuedDetial.vue"
import DemandDetial from "./demandDetial.vue"
import BaseInf from "./baseInf.vue"
import { chargestrategyConfigStore } from "@/stores/chargestrategyConfig"
const chargestrategyConfig = chargestrategyConfigStore()
const $api = inject("$api")
const emits = defineEmits(["issuedGoBack"])
const props = defineProps({
  stationList: {
    type: Array,
    default: [],
  },
  showType: {
    type: String,
    default: "issued",
  },
  stationId: {
    type: Number,
    default: null,
  },
  rowDataId: {
    type: Number,
    default: null,
  },
})
const issuedDetialRef = ref(null)
const demandDetialRef = ref(null)
const stationInfo = ref({})
const filterForm = ref({
  stationId: null,
})

const loading = ref(false)

//请求电池堆
const energyLinkList = ref([])
const activeKey = ref(null)
const activeObj = ref({})
const getEnergyLinkList = async (id) => {
  loading.value = true
  try {
    // 保存当前选中的电站信息
    const selectedStation = props.stationList.find(
      (station) => station.stationId === filterForm.value.stationId
    )
    if (selectedStation) {
      stationInfo.value = selectedStation
    }

    const res = await $api.chargeLink(filterForm.value)
    if (res && res.code === 0) {
      energyLinkList.value = res.data

      if (
        Object.keys(chargestrategyConfig.nowStationAndLink).length !== 0 &&
        "linkId" in chargestrategyConfig.nowStationAndLink
      ) {
        activeKey.value = chargestrategyConfig.nowStationAndLink.linkId
        activeObj.value = res.data.find(
          (item) => item.deviceId === activeKey.value
        )
      } else {
        activeKey.value = res.data[0].deviceId
        activeObj.value = res.data[0]
      }

      await nextTick()
      if (props.showType === "Issued") {
        const promises = []
        if (!isDetial.value) {
          promises.push(
            issuedDetialRef.value.getChargeStrategyLastDetail(activeKey.value)
          )
          promises.push(demandDetialRef.value.getPointFind(activeKey.value))
          promises.push(demandDetialRef.value.getCcuItem(activeKey.value))
        } else {
          promises.push(
            issuedDetialRef.value.getChargeStrategyDetail(props.rowDataId)
          )
        }
        await Promise.all(promises)
      }
    }
  } catch (error) {
    console.error("加载数据失败:", error)
  } finally {
    loading.value = false
  }
}
//电池堆切换
const changeTab = (val) => {
  if (!isDetial.value) {
    issuedDetialRef.value.getChargeStrategyLastDetail(val)
    demandDetialRef.value.getPointFind(val)
    demandDetialRef.value.getCcuItem(val)
  } else {
    issuedDetialRef.value.getChargeStrategyDetail(props.rowDataId)
  }
  activeObj.value = energyLinkList.value.find((item) => item.deviceId === val)
}
//返回
const goBack = () => {
  emits("issuedGoBack")
  chargestrategyConfig.changeNowStationAndLink({})
}
const changeStation = () => {
  chargestrategyConfig.changeNowStationAndLink({})
  stationInfo.value = {}
}
watch(
  () => props.stationList,
  (val) => {
    if (val && val.length !== 0) {
      if (Object.keys(chargestrategyConfig.nowStationAndLink).length !== 0) {
        filterForm.value.stationId =
          chargestrategyConfig.nowStationAndLink.stationId
      } else if (props.stationId) {
        filterForm.value.stationId = props.stationId
      } else {
        filterForm.value.stationId = val[0].stationId
        stationInfo.value = val[0]
      }
      getEnergyLinkList()
      /* filterForm.value.stationId = val[4].stationId
      getEnergyLinkList() */
    }
  },
  { deep: true, immediate: true }
)
watch(
  () => props.stationId,
  (val) => {
    if (val) {
      filterForm.value.stationId = val
      getEnergyLinkList()
    }
  }
)
const isDetial = ref(false)
onMounted(async () => {
  if (Object.keys(chargestrategyConfig.nowStationAndLink).length !== 0) {
    isDetial.value = true
  } else {
    isDetial.value = false
  }
})
onUnmounted(() => {
  chargestrategyConfig.changeNowStationAndLink({})
})
</script>

<style lang="less" scoped>
.infCon {
  background-color: #141414;
  padding: 30px;
  height: calc(100vh - 280px);
  overflow-y: scroll;
}
</style>
